<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现菜单栏切换效果</title>
		<style>
			.tab span{
				display: inline-block;
				width: 180px;
				height: 60px;
				border: 1px solid red;
			}
			.tab span:hover {
				cursor: pointer;
			}
			.selected {
				background-color: red;
				color: white;
			}
			.content div{
				display: none;
			}
			
		</style>
	</head>
	<body>
		<div class="tab">
			<span class="selected">精选</span>
			<span>智能先锋</span>
			<span>居家优品</span>
			<span>超市百货</span>
			<span>时尚达人</span>
			<span>进口好物</span>
		</div>
		<div class="content">
			<div style="display: block;">我是精选的内容</div>
			<div>我是智能先锋的内容</div>
			<div>我是居家优品的内容</div>
			<div>我是超市百货的内容</div>
			<div>我是时尚达人的内容</div>
			<div>我是进口好物的内容</div>
		</div>
		<script>
			//  处理上边
			var spans = document.querySelectorAll('.tab span');
			var divs = document.querySelectorAll('.content div');
			console.dir(spans);
			for(var i=0;i<spans.length;i++){
				// 定义自定义属性，用来直到我点击了谁，用来传递数据
				spans[i].setAttribute('data-index',i);
				
				spans[i].onclick = function(){
					// 去掉其它所有的class样式
					for(var i=0;i<spans.length;i++){
						spans[i].removeAttribute('class');
					}
					
					var myIndex = this.getAttribute('data-index');
					console.log('我点击了'+myIndex);
					this.setAttribute('class','selected');
					// 去掉所有.content下边div的显示
					for(var i=0;i<divs.length;i++){
						divs[i].style.display='none';
					}
					divs[myIndex].style.display='block';
					
				}
			}
			
			
		</script>
		
	</body>
	
</html>